<template>
  <view class="container">
    
    <Card class="wish-card">
      <view class="wish-header">
        <text class="card-title">随机愿望推荐</text>
        <Button class="refresh-btn" type="info" size="small" text="换一批" @click="refreshWishes" />
      </view>
      
      <view class="wishes-list">
        <view 
          v-for="(wish, index) in randomWishes" 
          :key="index" 
          class="wish-item"
          @click="selectWish(wish)"
        >
          <text class="wish-text">{{ wish.text }}</text>
          <Button class="select-btn" type="primary" size="small" text="选择" />
        </view>
      </view>
    </Card>
    
    <Card class="my-wishes-card">
      <view class="card-header">
        <text class="card-title">我的心愿</text>
        <Button class="add-btn" type="primary" size="small" text="添加心愿" @click="goToCreateWish" />
      </view>
      
      <view class="wishes-list">
        <Card 
          v-for="(wish, index) in myWishes" 
          :key="index" 
          class="wish-card-item"
          clickable
          @click="goToWishDetail(wish)"
        >
          <view class="wish-item-header">
            <text class="wish-item-title">{{ wish.title }}</text>
            <view class="wish-item-status" :class="wish.statusClass">
              {{ wish.status }}
            </view>
          </view>
          <view class="wish-item-content">
            <text class="wish-item-desc">{{ wish.description }}</text>
            <view class="wish-item-footer">
              <text class="wish-item-date">{{ wish.createTime }}</text>
              <text class="wish-item-progress">{{ wish.progress }}%</text>
            </view>
          </view>
        </Card>
      </view>
    </Card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      randomWishes: [
        { text: '奖励现金50元' },
        { text: '奖励一次游乐场游玩' },
        { text: '奖励一本喜欢的书' },
        { text: '奖励一次外出就餐' },
        { text: '奖励购买喜欢的玩具' }
      ],
      myWishes: [
        {
          id: '1',
          title: '想去游乐场',
          description: '如果我能连续一个月完成所有学习计划，就带我去游乐场玩',
          createTime: '2025.08.25',
          status: '进行中',
          statusClass: 'status-progress',
          progress: 60
        },
        {
          id: '2',
          title: '想要新书包',
          description: '完成本学期所有学习目标后，希望得到一个新书包',
          createTime: '2025.08.20',
          status: '未开始',
          statusClass: 'status-not-started',
          progress: 0
        }
      ]
    };
  },
  
  methods: {
    refreshWishes() {
      uni.showToast({
        title: '已刷新推荐',
        icon: 'success'
      });
    },
    
    selectWish(wish) {
      uni.showModal({
        title: '选择愿望',
        content: `确定要选择"${wish.text}"作为你的心愿吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '心愿添加成功',
              icon: 'success'
            });
          }
        }
      });
    },
    
    goToCreateWish() {
      uni.navigateTo({
        url: '/pages/wish/create'
      });
    },
    
    goToWishDetail(wish) {
      uni.navigateTo({
        url: '/pages/wish/detail?id=' + wish.id
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.wish-card {
  margin-bottom: $spacing-base;
}

.wish-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.wishes-list {
  margin-top: $spacing-sm;
}

.wish-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.wish-text {
  flex: 1;
  font-size: $font-size-base;
  color: $text-primary;
  margin-right: $spacing-base;
}

.select-btn {
  height: 60rpx;
}

.my-wishes-card {
  margin-bottom: $spacing-lg;
}

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.wish-card-item {
  margin-bottom: $spacing-sm;
}

.wish-item-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
}

.wish-item-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
}

.wish-item-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-progress {
  background-color: rgba($primary-color, 0.1);
  color: $primary-color;
}

.status-not-started {
  background-color: rgba($text-tertiary, 0.1);
  color: $text-tertiary;
}

.wish-item-content {
  font-size: $font-size-sm;
}

.wish-item-desc {
  color: $text-secondary;
  margin-bottom: $spacing-sm;
  display: block;
}

.wish-item-footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.wish-item-date {
  color: $text-tertiary;
}

.wish-item-progress {
  color: $primary-color;
  font-weight: bold;
}
</style>